<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/vue.js"></script>
    <style>
        .goods .name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="catbox">
            <table id="cartTable">
                <thead>
                    <tr>
                        <th><label>
                                <input class="check-all check" type="checkbox"
                                    v-model="isCheckedAll" />&nbsp;&nbsp;全选</label></th>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item of list" :key="item.goodsId">
                        <td class="checkbox"><input class="check-one check" v-model="item.isChecked" type="checkbox" />
                        </td>
                        <td class="goods">
                            <img :src="item.goodsImg" alt="" />
                            <span class="name">{{item.goodsName}}</span>
                        </td>
                        <td class="price">{{item.goodsPrice}}</td>
                        <td class="count">
                            <span class="reduce" @click="reduceHandler(item)"
                                :style="{cursor:item.buyNum>1?'pointer':'not-allowed'}">{{item.buyNum >
                                1 ? "-" :""}}</span>
                            <input class="count-input" type="text" :value="item.buyNum" />
                            <span class="add" @click="addHandler(item)">+</span>
                        </td>
                        <td class="subtotal">{{(item.goodsPrice*item.buyNum).toFixed(2)}}</td>
                        <td class="operation"><span class="delete" @click="deleteOneHandler(item)">删除</span></td>
                    </tr>
                </tbody>
            </table>
            <div class="foot" id="foot">

                <a class="fl" id="deleteAll" href="javascript:;" @click="deleteAllHandler">删除</a>
                <div class="fr closing" onclick="getTotal();">结 算</div>
                <input type="hidden" id="cartTotalPrice" />
                <div class="fr total">合计：￥<span id="priceTotal">{{priceTotal}}</span></div>
                <div class="fr selected" id="selected">已选商品<span id="selectedTotal">{{selectedTotal}}</span>件<span
                        class="arrow up">︽</span><span class="arrow down">︾</span></div>
                <div class="selected-view">
                    <div id="selectedViewList" class="clearfix">
                        <div><img src="../images/1.jpg"><span>取消选择</span></div>
                    </div>
                    <span class="arrow">◆<span>◆</span></span>
                </div>
            </div>
        </div>
    </div>



</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [],
        },
        methods: {
            getData() {
                var xhr = new XMLHttpRequest();

                xhr.open("get", "../data/shoppingCar.json", true);

                xhr.send();

                xhr.onreadystatechange = () => {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var res = xhr.responseText;
                        // console.log(res);

                        res = JSON.parse(res);
                        console.log(res);

                        this.list = res.list;
                    }
                }
            },
            addHandler(item) {
                console.log("加号", item);
                item.buyNum++;
            },
            reduceHandler(item) {
                if (item.buyNum <= 1) return false;
                console.log("减号", item);
                item.buyNum--;
            },
            deleteOneHandler(item) {
                if (confirm("是否删除该商品")) {
                    var index = this.list.indexOf(item);
                    if (index != -1) {
                        this.list.splice(index, 1);
                    }
                }
            },
            deleteAllHandler() {
                // 删除list中isChecked为true的商品
                // for (var i = 0; i < this.list.length; i++) {
                //     let item = this.list[i];
                //     if (item.isChecked) {
                //         this.list.splice(i, 1);
                //         i--;
                //     }
                // }

                // 删除list中isChecked为true的商品  => 留下的就是isChecked=false的商品
                this.list = this.list.filter(v => v.isChecked == false);
            }
        },
        computed: {
            isCheckedAll: {
                // isCheckedAll => 所有的商品是否全部都选中
                get() { // 取值 依赖于list中每件商品的isChecked
                    var flag = this.list.every(v => v.isChecked == true);  // every方法问题 -> 如果数组为[],任何条件均为true

                    return this.list.length > 0 ? flag : false;  // 有商品 every判断是生效的,没有商品 默认不反选
                },
                set(val) {
                    console.log("isCheckedAll", val);
                    this.list.forEach(v => v.isChecked = val);
                }
            },
            selectedTotal: function () {
                // return this.list.reduce((prev, item) => {
                //     return item.isChecked ? prev + item.buyNum : prev;
                // }, 0);

                var sum = 0;
                this.list.forEach(item => {
                    if (item.isChecked) {
                        sum += item.buyNum
                    }
                })
                return sum;

                return this.list.reduce((prev, item) => item.isChecked ? prev + item.buyNum : prev, 0);
            },
            priceTotal: function () {
                return this.list.reduce((prev, item) => item.isChecked ? prev + (item.buyNum * item.goodsPrice) : prev, 0).toFixed(2);
            }
        },
        watch: {
            list: {
                handler: function (newVal) {
                    console.log("list数据改变了", newVal);
                },
                deep: true,
            }
        },
        mounted() {
            this.getData();
        },
    })
</script>

</html>